body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd {
  /* 默认有边距，都要清除 */
  margin: 0;
  padding: 0;
  /*字体设置*/
  font-size: 14px;
  font-family: "PingFangSC-Medium", "PingFang SC", "Microsoft Yahei", sans-serif;
  color: #333;
  /* 去掉列表的原点 */
  list-style: none;
  /* 默认鼠标 */
  cursor: default;
}

/*行内块元素*/
input,
img {
  margin: 0;
  padding: 0;
  border: 0 none;
  outline-style: none;
  vertical-align: bottom;
}

/*行内元素*/
a,
a:active,
a:visited {
  /*下划线和颜色*/
  text-decoration: none;
  color: #ccc;
}

a:hover {
  color: #333;
}

textarea {
  /* 边框清零 */
  border: none;
  /* 轮廓线清零 */
  outline: none;
  /* 防止文本域被随意拖拽 */
  resize: none;
}

i {
  /*文字样式*/
  font-style: normal;
}

table {
  /*边框合并*/
  border-collapse: collapse;
  border-spacing: 0;
}


/* 使用伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
  content: "";
  height: 0;
  line-height: 0;
  display: block;
  visibility: none;
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-fluid {
  flex-wrap: wrap;
}

.center {
  justify-content: center;
  align-items: center;
}

.column-center-top {
  align-items: center;
}

.column-center-bottom {
  justify-content: flex-end;
  align-items: center;
}

.column-center-left {
  justify-content: center;
  align-items: flex-start;
}

.column-center-right {
  justify-content: center;
  align-items: flex-end;
}

.column-left-top {
  align-items: flex-start;
}

.column-right-top {
  align-items: flex-end;
}

.column-left-bottom {
  justify-content: flex-end;
  align-items: flex-start;
}

.column-right-bottom {
  justify-content: flex-end;
  align-items: flex-end;
}

.row-space-between {
  justify-content: space-between;
  align-items: center;
}

.row-center-top {
  justify-content: center;
  align-items: flex-start;
}

.row-center-bottom {
  justify-content: center;
  align-items: flex-end;
}

.row-center-left {
  align-items: center;
}

.row-stretch-left {
  align-items: stretch;
}

.row-center-right {
  justify-content: flex-end;
  align-items: center;
}

.row-left-top {
  align-items: flex-start;
}

.row-right-top {
  justify-content: flex-end;
  align-items: flex-start;
}

.row-left-bottom {
  align-items: flex-end;
}

.row-right-bottom {
  justify-content: flex-end;
  align-items: flex-end;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}